import * as React from "react"
import { useState } from "react"
import { useHistory } from "react-router-dom"
import Button from "../../components/button"
import Flex from "../../components/flex"
import Form from "../../components/form"
import Input from "../../components/input"
import NavBar from "../../components/navbar"
import Icon from "../../icon"
import session, { LOGIN_CAPTCHA_CODE } from "../../session"
import classes from "./index.module.scss"

export default function Login() {
  const history = useHistory()
  const [mobile, setMobile] = useState("")

  const captchaCode = session.get(LOGIN_CAPTCHA_CODE)
  console.log(captchaCode)

  return (
    <div className={classes.login}>
      <NavBar left={<Icon type="close" onClick={() => history.goBack()}/>}/>
      <div className={classes.loginContent}>
        <div className={classes.loginWelcome}>欢迎登录</div>
        <Form.Item className={classes.accountNumber}>
          <Input placeholder="请输入手机号" type="number" onChange={e => setMobile(e.target.value)}/>
        </Form.Item>
        <Button shape="circle" type="primary"
                size="large" className={classes.loginButton}
                onClick={() => history.push(`/captcha?type=sms&mobile=${mobile}`)}>获得验证码</Button>
        <Flex justifyContent="space-between" style={{ marginTop: "24px" }}>
          <Button type="link" className={classes.secondaryButton}>账号密码登录</Button>
          <Button type="link" className={classes.secondaryButton}
                  onClick={() => history.push("/register")}>新用户注册</Button>
        </Flex>
      </div>
    </div>
  )
}
